<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>个人中心-兑换历史</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <div th:include="includeJs::includeJs"></div>
  <div th:include="includeJs::layui_js"></div>

  <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">

  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
  <link th:replace="includeJs::dingding_nav">
</div>
<!--个人中心-->
<div class="wrapper wbgcolor">
  <div class="w1200 personal">
    <link th:replace="includeJs::userInfoMenu">
    <div class="personal-main">
      <div class="personal-zqzr personal-xtxx" style="min-height: 500px;">
        <h3> <i>兑换历史</i> </h3>
        <div class="wdhb-title wdhb-dhls"><span class="wdhb-yzm">兑换物品名称</span><span class="wdhb-con">价格</span><span class="wdhb-deadline">兑换日期</span> </div>
        <form id="form" name="form" method="post" action="">
          <div class="zqzr-list">
            <ul class="list_content">

             </ul>
            <div class="layui-btn-group">
              <button type="button" id="up_page" class="layui-btn layui-btn-sm"><input hidden id="current_page" value="" ><input hidden id="count_page" value="" ><i class="layui-icon">&#xe603;</i></button>
              <span id="page"></span>
              <button type="button" id="down_page" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
              <button type="button" id="count" class="layui-btn layui-btn-sm"></button>
            </div>
          </div>
          <!--<div style="float:left; width:760px;height:200px;padding-top:100px; text-align:center;color:#d4d4d4; font-size:16px;">
					 <img src="/site/themes/default/style/../images/nondata.png" width="60" height="60"><br><br>
					   暂无兑换记录</div>-->
        </form>
      </div>
    </div>
  </div>
</div>
<script>
   $(function () {
     list(1);

     $("#up_page").click(function () {
       let page = $("#current_page").val();
          page = parseInt(page) - 1;
         if(page < 1){
           page = 1;
           layer.msg("这已经是第一页了")
         }else {
           list(page);
         }

     });
     $("#down_page").click(function () {
       let page = $("#current_page").val();
       let count = $("#count_page").val();
       page = parseInt(page)+1;
       if(page > count){
          page = count;
          layer.msg("这已经是最后一页了")
        }else {
         list(page);
        }
     });
     $("#page").on('click','#select_page',function () {
        let number_page = $(this).text();
        let count = $("#count_page").val();
       //console.log(number_page);
        if(number_page < 1){
            return;
        }else if(number_page > count){
            return;
        }
        list(number_page);
     });
   });
   function list(page) {
     $.post('/exchange_list',{page:page},function (data) {
       $(".list_content").empty();
       $("#page").empty();
       $("#current_page").val(data.page.page);
       $("#count_page").val(data.page.pageAll);
       $("#count").text(data.page.page+"/"+data.page.pageAll);
       //console.log(data);
       $(data.obj).each(function (index,value) {
         var d = new Date(value.exchange_time);
         let date = formatDate(d);
         $(".list_content").append("<li style='width: 100%'><span class=\"wdhb-yzm\">"+value.commodity_name+"</span><span class=\"wdhb-con\">-"+value.commodity_price+"</span><span class=\"wdhb-deadline\" style='width: 120px;'>"+date+"</span></li>")
       });
       for(let i=1;i<=data.page.pageAll;i++){
         $("#page").append("<button type=\"button\" id='select_page' class=\"layui-btn layui-btn-sm\">" + i + "</button>");
       }
     },'json');
   }
   function formatDate(now) {
     var year=now.getFullYear();  //取得4位数的年份
     var month=now.getMonth()+1;  //取得日期中的月份，其中0表示1月，11表示12月
     var date=now.getDate();      //返回日期月份中的天数（1到31）
     var hour=now.getHours();     //返回日期中的小时数（0到23）
     var minute=now.getMinutes(); //返回日期中的分钟数（0到59）
     var second=now.getSeconds(); //返回日期中的秒数（0到59）
     return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
   }
</script>
<link th:replace="includeJs::userInfoJS">
</body>
</html>
